<template>
  <!-- 左右拖拽组件 -->
  <div ref="box" id="box" :class="sidebarFold[0]" :style="{'height':height}">
    <div ref="left" id="left" :style="{'width':widthLeft}">
      <slot name="left"></slot>
    </div>
    <span id @click="handleClick('fold')" v-show="isOperation" class="operation">折叠<</span>
    <span id @click="handleClick('open')" v-show="!isOperation" class="operation">展开></span>
    <div ref="resize" id="resize"></div>
    <div
      ref="right"
      id="right"
      :class="sidebarFold[2]"
      :style="{'width':`calc('100%' - ${widthLeft})`}"
    >
      <slot name="right"></slot>
    </div>
  </div>
</template>

<script>
/**
 * width -> 最小可拉伸宽度
 * height -> id="box" 盒子当前高度
 */
export default {
  data() {
    return {
      value: 0,
      boxA: 'box',
      leftA: 'left',
      rightA: 'right',
      // 控制折叠或者展开的属性
      isOperation: true
    }
  },
  props: {
    // 左侧最小被拉成的宽度
    width: {
      type: Number,
      default: 10
    },
    // 左侧的宽度是多少（百分比）
    widthLeft: {
      type: String,
      default: ''
    },
    // 整体的高度
    height: {
      type: Number
    }
  },
  computed: {
    sidebarFold: {
      get() {
        if (this.$store.state.common.sidebarFold) {
          this.$nextTick(() => {
            this.handle()
          })
          return ['box1', 'left1', 'right1']
        } else {
          this.$nextTick(() => {
            this.handle()
          })
          return ['box', 'left', 'right']
        }
      },
      set(val) {
        this.$store.commit('common/updateSidebarFold', val)
      }
    }
  },
  created() {
    window.addEventListener('resize', this.getHeight)
    this.$nextTick(() => {
      this.handle()
    })
  },
  destroyed() {
    window.removeEventListener('resize', this.getHeight)
  },
  watch: {
    // 监听 this.$route.path     watch监听非DOM元素的改变
    '$route.path': function(newVal, oldVal) {
      this.$nextTick(() => {
        this.handle()
      })
    }
  },
  methods: {
    handleClick(operation) {
      // alert(123)
      // 中间那条线的节点
      let resize = this.$refs.resize
      // 左侧盒子的节点
      let left = this.$refs.left
      // 右侧盒子的节点
      let right = this.$refs.right
      // 整个盒子的节点
      let box = this.$refs.box
      // console.log(left.offsetWidth)
      if (operation == 'fold') {
        this.isOperation = false
        left.style.width = '0px'
        right.style.width = 'calc(100% - 5px)'
      } else if (operation == 'open') {
        this.isOperation = true
        if (this.widthLeft != '') {
          left.style.width = `calc(${this.widthLeft} - 3px)`
          right.style.width = `calc(100% - ${this.widthLeft} - 5px)`
        } else {
          left.style.width = 'calc(15% - 3px)'
          right.style.width = 'calc(85% - 5px)'
        }
      }
    },
    getHeight() {
      this.$nextTick(() => {
        this.handle()
      })
    },
    handle(type) {
      let Awidth = Number(this.width)
      // 中间那条线的节点
      let resize = this.$refs.resize
      // 左侧盒子的节点
      let left = this.$refs.left
      // 右侧盒子的节点
      let right = this.$refs.right
      // 整个盒子的节点
      let box = this.$refs.box
      // 盒子设置高度
      if (this.height) {
        box.style.height = this.height + 'px'
      }
      // 初始化right的宽
      right.style.width = box.clientWidth - left.offsetWidth - 5 + 'px'
      // console.log(box.clientWidth)
      // console.log(right.style.width)
      // console.log(left.offsetWidth)
      // 拿_this保存this
      let _this = this
      resize.onmousedown = function(e) {
        let startX = e.clientX
        resize.left = resize.offsetLeft
        document.onmousemove = function(e) {
          let endX = e.clientX
          let moveLen = resize.left + (endX - startX)
          let maxT = box.clientWidth - resize.offsetWidth
          if (moveLen < Awidth) moveLen = Awidth
          if (moveLen > maxT - Awidth) moveLen = maxT - Awidth
          if (moveLen > box.clientWidth / 2) moveLen = box.clientWidth / 2
          resize.style.left = moveLen
          left.style.width = moveLen + 'px'
          right.style.width = box.clientWidth - moveLen - 3 - 3 + 'px'
        }
        document.onmouseup = function(evt) {
          // console.log(left.style.width)
          // 当折叠时，拖动后更改为折叠
          if (!_this.isOperation) {
            _this.isOperation = true
          }
          if(_this.isOperation && left.style.width == '0px'){
            _this.isOperation = false;
          }
          document.onmousemove = null
          document.onmouseup = null
          resize.releaseCapture && resize.releaseCapture()
        }
        resize.setCapture && resize.setCapture()
        return false
      }
    }
  }
}
</script>
<style lang="scss" scoped>
body,
html {
  margin: 0;
  padding: 0;
  height: 100%;
}
.operation {
  display: inline-block;
  width: 14px;
  margin-left: -1px;
  font-weight: 800;
  margin-top: 5px;
  font-size: 12px;
  cursor: pointer;
  color: #909399;
}
.box {
  width: calc(100vw - 170px);
  // height: 80vh;
    overflow: hidden;
}
.box1 {
  width: calc(100vw - 170px);
  // height: 80vh;
    overflow: hidden;
}
#left {
  width: calc(15% - 3px);
  height: 100%;
  //   background: #aaa;
  float: left;
}

#resize {
  width: 3px;
  // height: 92%;
  height: calc(80vh * 0.95);
  cursor: w-resize;
  background-color: #aaa;
  float: left;
  margin-top: 50px;
  user-select: none;
}

.right {
  float: right;
  width:  calc(85%);
  height: 100%;
  padding: 0 5px 0 5px;
  // overflow-y: auto;
  // background: #ccc;
  margin-top: -36px;
}
.right1 {
  float: right;
  width: calc(85%);
  height: 100%;
  padding: 0 5px 0 5px;
  // overflow-y: auto;
  margin-top: -36px;

  // background: #ccc;
}
</style>
